<template>
  <div class="leftView">
    <div class="shrink" @click="shows=!shows"></div>
    <transition name="animationLR">
      <div v-show="shows" style="display: flex;flex-direction: row">
        <div class='container'>
          <div class="container_title1">
            <span>三会一课</span>
          </div>
          <div style="display: flex;flex-direction: row">
            <span class="testTitle">2022年</span>
            <span class="testTitle" style="margin-left: 0px">第三季度</span>
          </div>
          <!--      <div class="selectContainer">-->
          <!--        <el-select v-model="selectYear" placeholder="请选择" :popper-append-to-body="false">-->
          <!--          <el-option-->
          <!--              v-for="(value, key) of yearList"-->
          <!--              :key="key"-->
          <!--              :label="value"-->
          <!--              :value="key">-->
          <!--          </el-option>-->
          <!--        </el-select>-->
          <!--        <el-select v-model="selectQuarter" placeholder="请选择" :popper-append-to-body="false">-->
          <!--          <el-option-->
          <!--              v-for="(value, key) of quarterList"-->
          <!--              :key="key"-->
          <!--              :label="value"-->
          <!--              :value="key">-->
          <!--          </el-option>-->
          <!--        </el-select>-->
          <!--      </div>-->
          <span class="container_title2">党员大会</span>
          <div class="container_meetting">
            <div class="container_meetting_pie" ref="pieEchart"></div>
            <div style="display: flex;flex-direction: column">
              <div style="display: flex;flex-direction: row;align-items: center">
                <div class="container_meetting_circle" style="background-color: #BA2CF8"></div>
                <span>已开会次数：{{
                    partyMemberMeetingData.list.length > 1 ? partyMemberMeetingData.list[1].value : '0'
                  }}次</span>
              </div>
              <div style="display: flex;flex-direction: row;align-items: center">
                <div class="container_meetting_circle" style="background-color: #FFFFFF"></div>
                <span>开会总数：{{ partyMemberMeetingData.number || '0' }}次</span>
              </div>
              <div style="display: flex;flex-direction: row"></div>
            </div>
          </div>
          <div class="line"></div>
          <span class="container_title2">支部委员会</span>
          <div class="category" ref="categoryEchart"></div>
          <div class="line"></div>
          <span class="container_title2">党课</span>
          <div class="container_meetting">
            <div class="container_meetting_pie" ref="pieEchart1"></div>
            <div style="display: flex;flex-direction: column">
              <div style="display: flex;flex-direction: row;align-items: center">
                <div class="container_meetting_circle" style="background-color: #76FBF8"></div>
                <span>已开会次数：{{
                    partyLessonData.list.length > 1 ? partyLessonData.list[1].value : '0'
                  }}次</span>
              </div>
              <div style="display: flex;flex-direction: row;align-items: center">
                <div class="container_meetting_circle" style="background-color: #FFFFFF"></div>
                <span>开会总数：{{ partyLessonData.number || '0' }}次</span>
              </div>
              <div style="display: flex;flex-direction: row"></div>
            </div>
          </div>
          <div class="line"></div>
          <span class="container_title2">党小组会</span>
          <div class="category" ref="categoryEchart1"></div>
        </div>
        <div class='container'>
          <div class="container_title1">
            <span>党员分析</span>
          </div>
          <span class="container_title2">学历分布</span>
          <div class="radarContainer">
            <div class="radarStyle" ref="eduEchart"></div>
            <div style="width: 70%;margin-left: 5%;display: flex;flex-direction: row;flex-wrap:wrap;justify-content: space-between">
              <span v-for="(item,index) in educationData" :key="index">{{ item.name + ':' + item.value + item.unit }}</span>
            </div>
          </div>
          <div class="line"></div>
          <span class="container_title2">年龄分布</span>
          <div class="container_meetting_agepie" ref="agePieEchart"></div>
          <div class="line"></div>
          <span class="container_title2">性别分布</span>
          <div class="container_meetting_sexpie" ref="sexEchart"></div>
          <div class="container_meetting_sexC">
            <div style="width: auto;display: flex;flex-direction: row;align-items: center">
              <div class="container_meetting_circle" style="background-color: rgb(112,232,249,1)"></div>
              <span style="color: white">男性</span>
            </div>

            <div style="width: auto;display: flex;flex-direction: row;align-items: center">
              <div class="container_meetting_circle" style="background-color: rgb(180,65,241,1)"></div>
              <span style="color: white">女性</span>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>

import * as echarts from "echarts";
import {
  ages,
  branchCommittee,
  education,
  gender,
  partyGroup,
  partyLesson,
  partyMemberMeeting
} from "@/api/partybuilding/axios";

export default {
  name: "floatLeft",
  data() {
    return {
      shows: true,
      educationData: [],//党员学历
      agesData: [],//党员年龄
      genderData: [],//党员性别
      partyMemberMeetingData: {'list': [],},//季度党员会议
      partyLessonData: {'list': [],},//季度党课开展
      branchCommitteeData: [],//当月支部委员会
      partyGroupData: [],//当月支部委员会
      selectYear: '',
      selectQuarter: '',
      yearList: {
        0: '2022年',
      },
      quarterList: {//季度
        0: '第一季度', 1: '第二季度', 2: '第三季度', 3: '第四季度'
      },
    }
  },
  mounted() {
    this.education()
    this.ages()
    this.gender()
    this.partyMemberMeeting()
    this.partyLesson()
    this.partyGroup()
    this.branchCommittee()
    // this.initPieEcharts1()
    this.initCategoryEcharts1()
  },
  beforeDestroy() {
  },
  methods: {
    //党小组会
    partyGroup() {
      var _this = this
      partyGroup().then(res => {
        _this.partyGroupData = res.data
        _this.initCategoryEcharts1()
      }).catch(e => {
      })
    },
    //党员大会
    partyMemberMeeting() {
      var _this = this
      partyMemberMeeting().then(res => {
        _this.partyMemberMeetingData = res.data
        _this.initPieEcharts()
      }).catch(e => {
      })
    },
    //支部委员会
    branchCommittee() {
      var _this = this
      branchCommittee().then(res => {
        _this.branchCommitteeData = res.data
        this.initCategoryEcharts()
      }).catch(e => {
      })
    },
    //党课
    partyLesson() {
      var _this = this
      partyLesson().then(res => {
        _this.partyLessonData = res.data
        _this.initPieEcharts1()
      }).catch(e => {
      })
    },
    //学历分布
    education() {
      var _this = this
      education().then(res => {
        _this.educationData = (res.data ||[])
        _this.initEduEcharts()
      }).catch(e => {
      })
    },
    //年龄分布
    ages() {
      var _this = this
      ages().then(res => {
        _this.agesData = res.data
        _this.initAgeEcharts()
      }).catch(e => {
      })
    },
    //性别分布
    gender() {
      var _this = this
      gender().then(res => {
        _this.genderData = res.data
        _this.initSexEcharts()
      }).catch(e => {
      })
    },
    //党员大会
    initPieEcharts() {
      var _this = this
      var pieEchart = require('echarts').init(this.$refs.pieEchart);
      var option = pieEchart.getOption();
      if (option != null) {
        pieEchart.clear();
        pieEchart.setOption(option);
      }
      if (_this.partyMemberMeetingData && _this.partyMemberMeetingData.list.length > 1) {
        _this.partyMemberMeetingData.list[1].itemStyle = {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: "#C228FF",
            },
            {
              offset: 1,
              color: "#5E37C4",
            },
          ]),
        }
      }
      option = {
        title: {
          // 设置饼图标题，位置设为顶部居中
          text: "",
          left: '45%',
          top: '30%',
          //标题样式
          textStyle: {
            fontSize: 14,
            color: "#FFFFFF",
            fontWeight: 400,
            fontFamily: 'PingFangSC-Medium',
          },
          subtext: '', // 副标题
          subtextStyle: { // 副标题样式
            fontSize: 28,
            fontFamily: 'DINAlternate-Bold',
            fontWeight: 400,
            color: "#72D7FF",
          },
          textAlign: 'center',
        },
        color: ['#FFFFFF', '#BA2CF8'],
        series: [
          {
            labelLine: {
              normal: {
                length: 30,
                //   lineStyle: {
                //     color: "#66ccff"  // 改变标示线的颜色
                //   }
              },
              show: true
            },
            label: {
              show: false,
              color: 'inherit',
              formatter: '{b}：{c}人\n',
              textStyle: {//定义不同地方的文字的字体大小和颜色
                fontSize: 16,
              },
              padding: [0, -20, 0, -20]
            },
            itemStyle: {
              // 此配置
              normal: {
                // borderWidth: 10,
                // borderColor: 'rgba(0 ,43, 98, 0.4)',
              },
            },
            type: 'pie', // 设置统计图类型
            selectedMode: 'single', // 一次只能选中一个模块
            radius: ['100%', '70%'], // 圆的大小为父类的70%
            center: ['50%', '50%'], // 圆的大小为父类的70%
            clockwise: true,  // 逆时针开始排序
            data: _this.partyMemberMeetingData.list
          },
        ]
      }
      pieEchart.setOption(option);
    },
    //党课
    initPieEcharts1() {
      var _this = this
      var pieEchart = require('echarts').init(this.$refs.pieEchart1);
      var option = pieEchart.getOption();
      if (option != null) {
        pieEchart.clear();
        pieEchart.setOption(option);
      }
      if (_this.partyLessonData && _this.partyLessonData.list.length > 1) {
        _this.partyLessonData.list[1].itemStyle = {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: "#48E7D5",
            },
            {
              offset: 1,
              color: "#185AA1",
            },
          ]),
        }
      }
      option = {
        title: {
          // 设置饼图标题，位置设为顶部居中
          text: "",
          left: '45%',
          top: '30%',
          //标题样式
          textStyle: {
            fontSize: 14,
            color: "#FFFFFF",
            fontWeight: 400,
            fontFamily: 'PingFangSC-Medium',
          },
          subtext: '', // 副标题
          subtextStyle: { // 副标题样式
            fontSize: 28,
            fontFamily: 'DINAlternate-Bold',
            fontWeight: 400,
            color: "#72D7FF",
          },
          textAlign: 'center',
        },
        color: ['#FFFFFF', '#76FBF8'],
        series: [
          {
            labelLine: {
              normal: {
                length: 30,
                //   lineStyle: {
                //     color: "#66ccff"  // 改变标示线的颜色
                //   }
              },
              show: true
            },
            label: {
              show: false,
              color: 'inherit',
              formatter: '{b}：{c}人\n',
              textStyle: {//定义不同地方的文字的字体大小和颜色
                fontSize: 16,
              },
              padding: [0, -20, 0, -20]
            },
            itemStyle: {
              // 此配置
              normal: {
                // borderWidth: 10,
                // borderColor: 'rgba(0 ,43, 98, 0.4)',
              },
            },
            type: 'pie', // 设置统计图类型
            selectedMode: 'single', // 一次只能选中一个模块
            radius: ['100%', '70%'], // 圆的大小为父类的70%
            clockwise: true,  // 逆时针开始排序
            data: _this.partyLessonData.list,
          },
        ]
      }
      pieEchart.setOption(option);
    },
    //支部委员会
    initCategoryEcharts() {
      var _this = this
      var categoryEchart = require('echarts').init(this.$refs.categoryEchart);
      var option = categoryEchart.getOption();
      if (option != null) {
        categoryEchart.clear();
        categoryEchart.setOption(option);
      }

      var yAxisData = []
      var seriesData1 = []
      var seriesData2 = []
      _this.branchCommitteeData.forEach(item => {
        yAxisData.push(item.month + "月")
        seriesData1.push(item.count)
        seriesData2.push(item.complete)
      })

      option = {
        grid: {
          left: "10%",
          right: "10%",
          bottom: "0",
          top: "0",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: 'rgba(34, 40, 46, 0.5)',
          borderWidth: "0", //边框宽度设置1
          borderColor: "", //设置边框颜色
          axisPointer: {
            type: "none",
          },
          textStyle: {
            color: "#ffffff" //设置文字颜色
          },
        },
        backgroundColor: "",
        xAxis: {
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#B8D3F1",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              type: 'line',
              color: '#2A6FDA',
              width: 1,
            },
          },
        },
        yAxis: [
          {
            type: "category",
            axisLabel: {
              show: true,
              textStyle: {
                color: "#B8D3F1",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: 'line',
                color: '#2A6FDA',
                width: 1,
              },
            },
            data: yAxisData,
          },
        ],
        series: [
          {
            name: "会议总数",
            type: "bar",
            barWidth: 20,
            barGap: "-100%",
            data: seriesData1,
            itemStyle: {
              normal: {
                color: "#0A4B93",
                barBorderRadius: 0,
              },
            },
          },
          {
            name: "已开次数",
            type: "bar",
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "rgb(46,200,207,1)",
                  },
                  {
                    offset: 1,
                    color: "rgb(46,200,207,0)",
                  },
                ]),
              },
            },
            barWidth: 20,
            data: seriesData2,
          },
        ],
      };
      categoryEchart.setOption(option);
    },
    //党小组会
    initCategoryEcharts1() {
      var _this = this
      var categoryEchart = require('echarts').init(this.$refs.categoryEchart1);
      var option = categoryEchart.getOption();
      if (option != null) {
        categoryEchart.clear();
        categoryEchart.setOption(option);
      }

      var yAxisData = []
      var seriesData1 = []
      var seriesData2 = []
      _this.partyGroupData.forEach(item => {
        yAxisData.push(item.month + "月")
        seriesData1.push(item.count)
        seriesData2.push(item.complete)
      })

      option = {
        grid: {
          left: "10%",
          right: "10%",
          bottom: "20%",
          top: "10%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: 'rgba(34, 40, 46, 0.5)',
          borderWidth: "0", //边框宽度设置1
          borderColor: "", //设置边框颜色
          axisPointer: {
            type: "none",
          },
          textStyle: {
            color: "#ffffff" //设置文字颜色
          },
        },
        backgroundColor: "",
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#B8D3F1",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'line',
              color: 'rgba(92,155,181)',
              width: 0.1,
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              type: 'line',
              color: '#2A6FDA',
              width: 1,
            },
          },
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              show: true,
              textStyle: {
                color: "#B8D3F1",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: 'line',
                color: '#2A6FDA',
                width: 1,
              },
            },
            data: yAxisData,
          },
        ],
        series: [
          {
            name: "会议总数",
            type: "bar",
            barWidth: 20,
            barGap: "-100%",
            data: seriesData1,
            itemStyle: {
              normal: {
                color: "#0A4B93",
                barBorderRadius: 0,
              },
            },
          },
          {
            name: "已开次数",
            type: "bar",
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "rgb(46,200,207,1)",
                  },
                  {
                    offset: 1,
                    color: "rgb(46,200,207,0)",
                  },
                ]),
              },
            },
            barWidth: 20,
            data: seriesData2,
          },
        ],
      };
      categoryEchart.setOption(option);
    },
    //性别分布
    initSexEcharts() {
      var sexEchart = require('echarts').init(this.$refs.sexEchart);
      var option = sexEchart.getOption();
      if (option != null) {
        sexEchart.clear();
        sexEchart.setOption(option);
      }
      option = {
        grid: {
          left: "10%",
          right: "10%",
          bottom: "0%",
          top: "10%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: 'rgba(34, 40, 46, 0.5)',
          borderWidth: "0", //边框宽度设置1
          borderColor: "", //设置边框颜色
          axisPointer: {
            type: "none",
          },
          textStyle: {
            color: "#ffffff" //设置文字颜色
          },
        },
        backgroundColor: "",
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            formatter: "{value}人", //右侧Y轴文字显示
            textStyle: {
              color: "#ffffff",
              fontSize: 10
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'line',
              color: 'rgba(92,155,181)',
              width: 0.1,
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              type: 'line',
              color: 'rgba(92,155,181)',
              width: 1,
            },
          },
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ffffff",
                fontSize: 10
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: 'line',
                color: 'rgba(92,155,181)',
                width: 1,
              },
            },
            data: ["男性", "女性"],
          },
        ],
        legend: {
          x: 'right',
          icon: 'rect',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#ffffff", //设置文字颜色
            fontSize: 10,
          },
          data: ["男性", "女性"]
        },
        series: [
          {
            name: "",
            type: "bar",
            barWidth: 20,
            data: [{
              value: this.genderData.male, itemStyle: {
                normal: {
                  barBorderRadius: 0,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgb(112,232,249,1)",
                    },
                    {
                      offset: 1,
                      color: "rgb(64,143,240,1)",
                    },
                  ]),
                },
              },
            },
              {
                value: this.genderData.female, itemStyle: {
                  normal: {
                    barBorderRadius: 0,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgb(180,65,241,1)",
                      },
                      {
                        offset: 1,
                        color: "rgb(64,70,137,1)",
                      },
                    ]),
                  },
                },
              }],
          },
        ],
      };
      sexEchart.setOption(option);
    },
    //学历分布
    initEduEcharts() {
      var _this = this
      var radarEcharts = require('echarts').init(this.$refs.eduEchart);
      var option = radarEcharts.getOption();
      if (option != null) {
        radarEcharts.clear();
        radarEcharts.setOption(option);
      }
      var indicatorData = []
      var showData = []
      _this.educationData.forEach(item => {
        indicatorData.push({'text': item.name})
        showData.push(item.value)
      })
      var dataArr1 = [
        {
          value: showData,
          itemStyle: {
            normal: {
              lineStyle: {
                color: "#28CE57",
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: "#28CE57",
              shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: {
              // 单项区域填充样式
              color: {
                type: "linear",
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [
                  // {
                  //   offset: 0,
                  //   color: "#4A99FF",
                  // },
                  // {
                  //   offset: 0.5,
                  //   color: "rgba(0,0,0,0)",
                  // },
                  {
                    offset: 1,
                    color: "rgba(56,155,255,0.30)",
                  },
                ],
                globalCoord: false,
              },
              opacity: 1, // 区域透明度
            },
          },
        },
      ];
      var colorArr1 = ["#28CE57"]; //颜色
      option = {
        // backgroundColor: "#101736",
        color: colorArr1,
        radar: {
          radius: ['40%', '70%'], //图表尺寸
          center: ['50%', '50%'],
          // shape: 'circle',
          name: {
            textStyle: {
              color: "#2AAEF2",
              fontSize: 10,
              padding: [-14, -14, -14, -14]
            },
          },
          indicator: indicatorData,
          splitArea: {
            // 坐标轴在 grid 区域中的分隔区域，默认不显示。
            show: true,
            areaStyle: {
              // 分隔区域的样式设置。
              color: ["rgba(255,255,255,0)",], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            },
          },
          axisLine: {
            //指向外圈文本的分隔线样式
            show: false,
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#2AAEF2", // 分隔线颜色
              width: 0.1, // 分隔线线宽
            },
          },
        },
        series: [
          {
            type: "radar",
            symbolSize: 3,
            symbol: 'circle',
            data: dataArr1,
          },
        ],
      };
      radarEcharts.setOption(option)
    },
    //年龄分布
    initAgeEcharts() {
      var _this = this
      var agePieEchart = require('echarts').init(this.$refs.agePieEchart);
      var option = agePieEchart.getOption();
      if (option != null) {
        agePieEchart.clear();
        agePieEchart.setOption(option);
      }
      agePieEchart.setOption({
        title: {
          // 设置饼图标题，位置设为顶部居中
          text: "",
          left: '45%',
          top: '30%',
          //标题样式
          textStyle: {
            fontSize: 14,
            color: "#FFFFFF",
            fontWeight: 400,
            fontFamily: 'PingFangSC-Medium',
          },
          subtext: '', // 副标题
          subtextStyle: { // 副标题样式
            fontSize: 28,
            fontFamily: 'DINAlternate-Bold',
            fontWeight: 400,
            color: "#72D7FF",
          },
          textAlign: 'center',
        },
        color: ['rgba(161,70,240)', 'rgba(95,202,249)', 'rgba(110,227,142)', 'rgba(243,171,67)'],
        series: [
          {
            labelLine: {
              normal: {
                lineStyle: {
                  color: '#ffffff',  // 改变标示线的颜色
                }
              },
              show: true
            },
            label: {
              normal: {
                // color: 'inherit',
                color: '#ffffff',
                formatter: '{b}\n{c}人\n\n',
                textStyle: {//定义不同地方的文字的字体大小和颜色
                  fontSize: 10,
                },
                overflow: 'none',
                padding: [0, -30, 0, 0],
              },
            },
            itemStyle: {
              // 此配置
              normal: {
                // borderWidth: 10,
                // borderColor: 'rgba(0 ,43, 98, 0.4)',
              },
            },
            type: 'pie', // 设置统计图类型
            selectedMode: 'single', // 一次只能选中一个模块
            radius: ['40%', '55%'], // 圆的大小为父类的70%
            center: ['50%', '50%'], // 圆的大小为父类的70%
            clockwise: true,  // 逆时针开始排序
            data: _this.agesData
          },
        ]
      });
    },
  }
}
</script>

<style lang="scss">


.selectContainer {
  position: relative;
  margin-left: 30px;
  margin-top: 11px;

  .el-input {
    width: 95px;
    font-size: 10px;
    height: 23px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #B8D3F1;
    line-height: 23px;
    background-size: 100% 100%;
    background-image: url("@/assets/bg_select.png");
    border-radius: 0px;
    border: 0px solid #19966F;


  }

  .el-input__inner {
    width: 95px;
    height: 23px;
    border: 0px;
    background: transparent;
  }

  .el-select__caret:before {
    content: "";
    position: absolute;
    top: -8px;
    right: 0px;
    transform: translate(-5px, 0px);
    //color: #98dcff;
  }

  .el-select-dropdown {
    background: #0D3761;
    border: 0px solid transparent;
  }

  // 设置下拉框的字体属性及背景颜色；
  .el-select-dropdown__item {
    text-align: center;
    height: 23px;
    margin-left: 6px;
    margin-right: 6px;
    margin-bottom: 10px;
    font-weight: 400;
    line-height: 22px;
    font-size: 10px;
    font-family: Source Han Sans SC;
    color: #FFFFFF;
    background-color: transparent;
  }

  .el-select-dropdown__item.selected {
    color: #03E4FF;
  }

  // 设置下拉框列表的 padding 值为：0；(即：样式调整)
  .el-select-dropdown__list {
    padding: 0;
  }

  // 设置输入框与下拉框的距离为：0; (即：样式调整)
  .el-popper[x-placement^="bottom"] {
    margin-top: 0px;
    padding-top: 10px;
  }

  // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头)
  .el-popper .popper__arrow,
  .el-popper .popper__arrow::after {
    display: none;
  }

  // 设置鼠标悬停在下拉框列表的悬停色；
  .el-select-dropdown__item:hover {
    background-color: #cccccc;
  }
}
</style>

<style lang="scss" scoped>

.leftView {
  float: left;
  margin-top: 20px;
  height: 660px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  z-index: 3;

  .shrink {
    width: 23px;
    height: 321px;
    background-size: 100% 100%;
    background-image: url("@/assets/icon_shrink.png");
  }

  .container {
    width: 265px;
    height: 100%;
    background-size: 100% 100%;
    background-image: url("@/assets/bg_left.png");
    display: flex;
    flex-direction: column;

    &_title1 {
      width: 216px;
      height: 24px;
      margin-top: 30px;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 22px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title1.png");

      span {
        height: 24px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #FFFFFF;
        margin-left: 11px;
        line-height: 24px;
        background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

    }

    &_title2 {
      width: 100%;
      text-align: center;
      height: 11px;
      margin-top: 10px;
      margin-bottom: 10px;
      font-size: 11px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #03E4FF;
      line-height: 11px;
    }

    &_meetting {
      display: flex;
      flex-direction: row;
      align-items: center;

      &_pie {
        margin-left: 53px;
        width: 66px;
        height: 66px;
      }

      &_agepie {
        width: 100%;
        height: 142px;
      }

      &_sexpie {
        width: 100%;
        height: 92px;
      }

      &_sexC {
        display: flex;
        height: 22px;
        width: 100%;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        margin-bottom: 30px;
      }

      &_category {
        width: 100%;
        height: 113px;
      }

      &_circle {
        max-width: 5px;
        min-width: 5px;
        max-height: 5px;
        min-height: 5px;
        margin-left: 17px;
        margin-right: 4px;
      }

      span {
        height: 26px;
        font-size: 9px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #DBFBFF;
        line-height: 26px;
      }
    }
  }
}

.category {
  width: 100%;
  height: 113px;
}

.radarContainer {
  height: 150px;
  display: flex;
  position: relative;
  align-items: center;
  flex-direction: column;

  .radarStyle {
    width: 100%;
    height: 70%;
  }

  span {
    display: block;
    margin-left: 20px;
    height: 15px;
    font-size: 9px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #DBFBFF;
    line-height: 15px;
  }
}

.line {
  width: 213px;
  height: 2px;
  margin-top: 12px;
  margin-left: 23px;
  background-size: 100% 100%;
  background-image: url("@/assets/icon_line.png");
}

.testTitle {
  margin-top: 10px;
  height: 23px;
  margin-left: 30px;
  margin-right: 6px;
  font-weight: 400;
  line-height: 22px;
  font-size: 14px;
  font-family: Source Han Sans SC;
  color: #FFFFFF;
  background-color: transparent;
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .leftView {
    margin-top: calHeight_2k(20px);
    height: calHeight_2k(660px);

    .shrink {
      height: calHeight_2k(321px);
    }

    .container {

      &_title1 {
        height: calHeight_2k(24px);
        margin-top: calHeight_2k(30px);

        span {
          height: calHeight_2k(24px);
          line-height: calHeight_2k(24px);
        }

      }

      &_title2 {
        height: calHeight_2k(11px);
        margin-top: calHeight_2k(10px);
        margin-bottom: calHeight_2k(10px);
        line-height: calHeight_2k(11px);
      }

      &_meetting {
        display: flex;
        flex-direction: row;
        align-items: center;

        &_pie {
          height: calHeight_2k(66px);
        }

        &_agepie {
          height: calHeight_2k(142px);
        }

        &_sexpie {
          height: calHeight_2k(92px);
        }
        &_sexC {
          height:  calHeight_2k(22px);
          margin-bottom:  calHeight_2k(30px);
        }
        &_category {
          height: calHeight_2k(113px);
        }

        &_circle {
        }

        span {
          height: calHeight_2k(26px);
          line-height: calHeight_2k(26px);
        }
      }
    }
  }

  .category {
    height: calHeight_2k(113px);
  }

  .radarContainer {
    height: calHeight_2k(150px);

    .radarStyle {
    }

    span {
      height: calHeight_2k(15px);
      line-height: calHeight_2k(15px);
    }
  }

  .line {
    height: calHeight_2k(2px);
    margin-top: calHeight_2k(12px);
  }

  .testTitle {
    margin-top: calHeight_2k(10px);
    height: calHeight_2k(23px);
    line-height: calHeight_2k(22px);
  }

}


</style>
